<template>
	<z-paging class="zPagingCircle" ref="paging" @onRefresh="onRefresh" @query="query" v-model="list" @scroll="scroll"
		:empty-view-style="{ 'margin-bottom': '100rpx' }" :auto="false">
		<view class="sch">
			<u-search placeholder="关键字进行筛选" :clearabled="true" :showAction="false"
				v-model="params.name" @change='getsearch'></u-search>
		</view>
	
		<view class="container">
			<view class="cell flex-row" v-for="it in list" @click="toOhter(it)">
				<image :src="it.head" class="avatar"></image>
				<view class="flex-1">
					<view class="text1">{{it.nickname}}</view>
					<!-- <view class="text2">{{it.num_people}}订单&nbsp;朋友</view> -->
					<view class="intro">
						类型：{{it.type === 1 ? '月费会员' : it.type === 2 ? '年费会员' : '永久会员'}}
					</view>
					<view class="intro">
						时间：<text style="color: cadetblue;">{{settime(it.add_time)}} - {{settime(it.end_time)}}</text>
					</view>
				</view>
			</view>
			
		</view>
	</z-paging>
</template>

<script>
	import {
		join_circle_order
	} from '@/common/http/api.js'
	export default {
		data() {
			return {
				list: [],
				//分页
				params: {
					name:'',
					circle_id: 1
				}
			};
		},
		onLoad(e) {
			this.params.circle_id = e.circle_id
			this.reload()
		},
		methods: {
			settime(t){
				let x=''
				if(t){
						x=t.split(' ')[0]
				}
			
				return x
			},
			getsearch(){
				
				this.init()
			},
			toOhter(it){
				uni.navigateTo({
					url:'/pages/index/other?isBackHome=2&isBackHome=2&shareId=' + it.b_id
				})
			},
			/**
			 * 分页
			 * @param {Object} pageNo 页码
			 * @param {Object} pageSize 数量
			 */
			query(pageNo, pageSize) {
				
				this.init(pageNo, pageSize)
			},
			// 下拉刷新被触发
			onRefresh() {
				console.log('下拉刷新')
			},
			init(pageNo = 1, pageSize) {
				const params = {
					...this.params,
					page: pageNo
				}
				join_circle_order(params).then(res => {
					this.$refs.paging.complete(res.data);
				}).catch(err => {
					this.$refs.paging.complete(false);
				})
			},
			reload() {
				this.$refs.paging.reload();
			}
		}
	}
</script>

<style lang="scss">
	.sch{
		width: 690rpx;
		margin-left: 30rpx;
		padding:20rpx 0;
	}
	.container {

		.cell {
			padding: 30rpx;
			border-bottom: 1px solid #f5f5f5;

			.text1 {
				font-size: 30rpx;
				font-weight: bold;
			}

			.text2 {
				font-size: 26rpx;
				color: #dfbe5e;
				margin: 10rpx 0;
			}

			.avatar {
				width: 100rpx;
				height: 100rpx;
				border-radius: 20rpx;
				margin-right: 20rpx;
			}

			.intro {
				margin-top: 10rpx;
				
				display: -webkit-box;
				/* 关键属性 */
				-webkit-box-orient: vertical;
				/* 排列方向 */
				-webkit-line-clamp: 2;
				/* 显示行数 */
				overflow: hidden;
				/* 溢出隐藏 */
				text-overflow: ellipsis;
				/* 省略号 */
				word-break: break-word;
				font-size: 26rpx;
				color: #999;
			}
		}
	}
</style>